<template>
    <div>
        <div class="box" ref="boxs" >
            <!-- 顶部图片 -->
            <div class="imgs">
                    <img @click="goToProduct(goodsList.category_list[0]?.body.items[0]?.action.path)" v-if="goodsList.category_list" :src="goodsList.category_list[0]?.body.items[0]?.img_url" alt="">
            </div> 
            <!-- 中间nav -->
            <div ref="midscroll" v-if="goodsList.title_list" class="mid-nav">
               <div  @click="toLocal(index)" :class="[{active: navIndex == index},`nav${index}`]" class="nav-title" v-for="(i,index) in goodsList.title_list" :key="i.log_code" >{{ i.title}}</div>
            </div> 
             <!-- 底部商品列表 -->
            <div class="list">
                <div v-for="(i,index) in goodsList.category_list" :key="index"  >
                    <div class="box2">
                        <!-- 商品分类标题 -->
                        <div :class='`title${index}`' v-if="i.body.category_name"  class="series-title" >
                            {{ i.body.category_name }}
                        </div>
                        <!-- 第一类商品 -->
                        <div class="goods-list" v-for=" i in i.body.product_list" :key="i.name"  @click="goToProduct(i.action.path)">
                            <div class="list-box">
                                <img :src="i.puzzle_url" alt="">
                                <div class="box-content">
                                    <p>{{ i.name }}</p>
                                    <div class="labels-price">
                                        <p>$<span>{{ i.price }}</span>起</p>
                                         <p class="labels" v-if="i.labels">{{ i.labels[0]}}</p> 
                                    </div>
                                </div>
                            </div>
                        </div>
                         <!-- 其他类商品 -->
                        <div class="accessories">
                            <div class="access-goods"  @click="goToProduct(j.action.path)"  v-show="i.body.items && i.view_type !=`cells_auto_fill`" v-for="(j,index) in i.body.items" :key="index" >
                               <img :src="j.img_url" alt="">
                               <div class="access-name">{{ j.product_name }}</div>
                            </div>
                        </div>
                   </div>
                </div>
            </div>
       
        </div>

    </div>
</template>
<script>
    import {getGoodsListApi} from '../../assets/api' 
export  default{
props:['ids','banners'],
data(){
    return{
        navIndex:0,
        selectID:'',
        null:'',
        goodsList:'',
        numIndex:1,
        clock:true
    }
},
methods:{
    async getRightListBefore(){
            let url = getGoodsListApi(this.selectID)
            let {data} = await this.$http(url)
            this.goodsList = data.data[0]
        },  //获取接口数据
   loading(e){
    // this.clock = true
    if(this.clock == true) {
        // console.log(111);
        const scrollTop = e.target.scrollTop  //滚动条滚动时，举例顶部的距离
    //  const windowHeight = e.target.clientHeight //可视区的高度
    //  const scrollHeight = e.target.scrollHeight  //滚动条的总高度
     let bannernow = document.getElementsByClassName('box') 
     let num  = this.numIndex
    //  console.log(bannernow[num]);
     let classHeight = bannernow[num]?.getElementsByClassName('series-title')
        for(let i = 0;i<classHeight.length;i++){
            if(scrollTop >= classHeight[i]?.offsetTop && scrollTop <=classHeight[i+1]?.offsetTop ){
               this.navIndex = i
         }   
    }
      
    }
   },   //滚动事件改编index
   toLocal(id){
    this.clock = false
    let bannernow = document.getElementsByClassName('box') 
    let a = parseInt(id) *2 +1
    let b =`title${a}`
    let num  = this.numIndex
    let toElement = bannernow[num]?.getElementsByClassName(b)
    this.$refs.boxs.scrollTop = (toElement[0].offsetTop - 50)
    this.navIndex = id
    setTimeout(() => {
        this.clock= true
    }, 100);
    let c = `nav${id}`
    let toElementNav = bannernow[num]?.getElementsByClassName(c)
    this.$refs.midscroll.scrollLeft = toElementNav[0].offsetLeft - 90
   },   //点击跳转到指定scroll位置
   goToProduct(id){
    this.$router.push({
        path:`/productdetails/${id}`
    })
   }    //点击跳转商品详情页面
},
watch:{
 ids:function(newid,oldid){
    this.null = oldid
    this.selectID = newid
    this.getRightListBefore()
 }, //监听当前接口id
 banners:function(newindex,oldindex){
    // console.log(newindex);
    this.null = oldindex
    this.numIndex = newindex
 } //监听当前轮播图在第几层
},
mounted(){
    this.$refs.boxs.addEventListener('scroll',this.loading) //绑定整体scroll
}
}
</script>
<style lang="scss">
.box{ 
    height: 85vh;
    overflow: scroll;
    // scrollbar-width: none;
    position: relative;
    top: 0;
    left: 0;
    .imgs{
         img{
         width: 70vw;
     }
    }
    .mid-nav{
     display: flex;
     height: 6vh;
     white-space: nowrap;
     font-size: 12px;
     width: 75vw;
     border-bottom: 1px solid #f0f0f0;
     overflow: scroll;
     scrollbar-width: none;
     position: sticky;
     top: 0px;
     background-color: #fff;
    //  margin: 0 0 0 -3vw ;
     .nav-title{
         width: auto;
         padding: 0 1vw;
         height: 3vh;
         margin: 1.5vh 5vw 0 0vw ;
         // background-color: #efefef;
         &.active{
             background-color: #efefef;
         }
     }
     &.mid-nav::-webkit-scrollbar{
       display:none
     }
 
    }
    .list{
     margin:0 0 10vh 0;
     .box2{
        .series-title{
        margin: 3vh 0 0 0;
        width: 90%;
        font-size: 15px;
        font-weight: bolder;
        }
        .goods-list{ 
           img{
               width: 18vw;
               height: 10vh;
           }
           .list-box{
            width: 90%;
            display: flex;
            height: 10vh;
            padding:  1vh 1vh 1vh 1vh;
            background-color:#f8f8f8;
            margin: 0 0 1vh 0;
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
            .box-content{
               margin: 1vh 0 0 0;
               .labels-price{
                  display: flex;
                  .labels{
                     outline: 1px solid #c69768;
                     color: #c69768;
                     height: 2vh;
                     line-height: 2.5vh;
                     font-size: 12px;
                     padding: 0 1vw 0 1vw ;
                     margin: 1.5vh 0 0 4vw;
                     border-radius: 2px;
                  }
               }
               p{
                  margin: 1vh 0 0vh 0;
                  span{
                      font-size: 17px;
                  }
               }
            }
            
           }
        } 
        .accessories{
           display: flex;
           flex-wrap: wrap;
           width: 90%;
           margin: 0vh 0 0 0vw ;
           font-size: 12px;
           color: #5e5e5e;
           text-align: center;
           .access-goods{
              margin: 2vh 0vw 2vh 0vh;
              width: 23vw;
              .access-name{
                 margin: 1vh 0 0 0;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
              }
           }
           img{
             width: 14vw;
             height: 8vh;
           }
        }
     }
    }
 }

</style>